//轮播图
import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js";

function Banner() {
    const $banner = $('.banner');
    const $btn = $('ol li');
    const $img = $('ul li');
    const $left = $('.left');
    const $right = $('.right');
    let $index = 0;
    let timer = null;
    let timer1 = null;

    function Banner() {
        $btn.eq($index).addClass('active').siblings('ol li').removeClass('active');
        $img.eq($index).stop(true).animate({
            opacity: 1
        }, 300).siblings('ul li').stop(true).animate({
            opacity: 0
        }, 300);
    }

    $btn.on('mouseover', function () {
        $index = $(this).index();
        timer1 = setTimeout(() => {
            Banner();
        }, 300)
    });
    $btn.on('mouseout', function () {
        clearTimeout(timer1);
    })
    $right.on('click', function () {
        $index++;
        if ($index > $btn.length - 1) {
            $index = 0;
        }
        Banner();
    });
    $left.on('click', function () {
        $index--;
        if ($index < 0) {
            $index = $btn.length - 1;
        }
        Banner();
    });
    timer = setInterval(() => {
        $right.click()
    }, 4000);
    $banner.hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(() => {
            $right.click()
        }, 4000);
    });
};

export {
    Banner
}